<template>
<Row class="circlesteps">
    <div class="circlesteps-graybar"></div>
    <div class="circlesteps-lightbar" :style="{width: lightbarWidth + '%'}"></div>
    <div v-for="(item, index) in steps" 
        :style="{width: itemWidth + '%'}" 
        :class="{'circlesteps-item-undo': index >= step}"
        :key="index" 
        class="circlesteps-item"
        >{{ item }}</div>
</Row>
</template>

<script>
export default {
    props: {
        step: {
            type: Number,
            default: 2
        },
        steps: {
            type: Array
        }
    },
    computed: {
        lightbarWidth() {
            return 100 * (this.step - 0.5) / this.steps.length;
        },
        itemWidth() {
            return 100 / this.steps.length;
        }
    }
}
</script>

<style lang="less">
@import '../../var.less';

.circlesteps {
    display: inline-block;
    width: 100%;
    position: relative;
    &-graybar {
        position: absolute;
        left: 0;
        top: 6px;
        width: 100%;
        height: 3px;
        background-color: @gray4;
        border-radius: 2px;
    }
    &-lightbar {
        position: absolute;
        left: 0;
        top: 6px;
        height: 3px;
        background-color: @blue;
        border-radius: 2px;
    }
    &-item {
        float: left;
        position: relative;
        margin-top: 24px;
        text-align: center;
        word-wrap: break-word;
        &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: -24px;
            margin-left: -8px;
            height: 16px;
            width: 16px;
            border: 2px solid @blue;
            border-radius: 100px;
            background-color: #fff;
        }
        &-undo {
            &::before {
                border-color: @gray4;
            }
        }
    }
}
</style>
